<template>
  <el-container style="height: 100vh;">
    <!-- 左侧导航栏 -->
    <el-aside :width="sideWidth + 'px'" style="background-color: rgb(238, 241, 246)">
      <Sidebar />
    </el-aside>

    <!-- 右侧内容 -->
    <el-container>
      <!-- 页面头部 -->
      <el-header style="background-color: #409EFF; padding: 10px; color: white">
        <div style="display: flex; align-items: center">
          <!-- 头像 -->
          <el-avatar
              size="60"
              src=""
              alt="头像"
              style="margin-right: 20px"
          />
          <!-- 用户信息 -->
          <div>
            <h2 style="margin: 0; font-size: 24px">张三</h2>
            <p style="margin: 0; font-size: 16px">牛马大学生</p>
          </div>
        </div>
      </el-header>

      <!-- 页面主体 -->
      <el-main style="padding: 20px">
        <el-card shadow="always" style="margin-top: 30px;">
          <el-table
              :data="filteredExamList"
              style="width: 100%"
              border
              row-key="id"
          >
            <el-table-column
                prop="name"
                label="作业名称"
                width="250"
                align="center"
            />
            <el-table-column
                label="学生学号"
                width="150"
                align="center"
            >
              <template #default="scope">
                {{ scope.row.stuNum }}
              </template>
            </el-table-column>
            <el-table-column
                label="学生姓名"
                width="150"
                align="center"
            >
              <template #default="scope">
                {{ scope.row.studentName }}
              </template>
            </el-table-column>
            <el-table-column
                label="是否已经提交"
                width="250"
                align="center"
            >
              <template #default="scope">
                <el-tag :type="getSubmitTagType(scope.row.isSubmit)" class="status-tag">
                  {{ getSubmitText(scope.row.isSubmit) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column
                label="成绩"
                width="250"
                align="center"
            >
              <template #default="scope">
                {{ scope.row.score.toFixed(1) }}
              </template>
            </el-table-column>
            <el-table-column
                label="操作"
                align="center"
            >
              <template #default="scope">
                <el-button
                    :disabled="scope.row.isSubmit !== 'y'"
                    type="text"
                    class="action-button"
                    @click="viewDetails(scope.row)"
                >
                  查看学生作业详情
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { ElMessage, ElMessageBox } from "element-plus";
import Sidebar from "@/views/SidebarForT.vue";
import axios from "axios";

export default {
  components: {
    Sidebar,
  },
  data() {
    return {
      sideWidth: 200, // 侧边栏宽度
      ExamList: [],
      classNumber: "", // 从上一个页面接收的班级编号
      name: "" // 从上一个页面接收的作业名称
    };
  },
  computed: {
    filteredExamList() {
      return this.ExamList.filter(item => item.isUse === 'y');
    }
  },
  mounted() {
    // 从路由参数中获取 classNumber 和 name
    this.classNumber = this.$route.query.class_number;
    this.name = this.$route.query.name;

    // 调用后端接口获取作业列表
    this.getExamList();
  },
  methods: {
    getExamList() {
      // 使用 axios 调用后端接口，并传递 classNumber 和 name 参数
      axios.get("http://localhost:80/teachers/getStuWorkListByClass", {
        params: {
          classNumber: this.classNumber, // 传递班级编号
          name: this.name // 传递作业名称
        }
      }).then((resp) => {
        const result = resp.data;
        if (result.code === 0) { // 假设后端返回的 code 为 0 表示成功
          this.ExamList = result.data.map(item => ({
            ...item,
            status: this.getStatusText(item),
            submitted: this.getSubmitText(item.isSubmit)
          }));
        } else {
          ElMessage.error(result.message || "获取作业列表失败");
        }
      }).catch((error) => {
        console.error("请求失败:", error);
        ElMessage.error("请求作业列表失败");
      });
    },
    getStatusTagType(row) {
      switch (this.getStatusText(row)) {
        case "未开始":
          return "info";
        case "进行中":
          return "warning";
        case "已结束":
          return "success";
        default:
          return "";
      }
    },
    getSubmitTagType(submitted) {
      return submitted === "y" ? "success" : "danger";
    },
    getStatusText(row) {
      const now = new Date();
      const startTime = new Date(row.start_time);
      const endTime = new Date(row.end_time);

      if (now > endTime) {
        return "已结束";
      } else if (now >= startTime && now <= endTime) {
        return "进行中";
      } else {
        return "未开始";
      }
    },
    getSubmitText(isSubmit) {
      return isSubmit === "y" ? "已提交" : "未提交";
    },
    viewDetails(row) {
      console.log(`查看详情: ${row.name}`);
      ElMessage.success(`查看详情: ${row.name}`);
      this.$router.push({
        path: '/questions/detail',
        query: { id: row.id }
      });
    },
  }
};
</script>

<style scoped>
/* 表格整体样式 */
.Exam-table {
  width: 100%;
}

/* 表头和内容对齐 */
.el-table th {
  text-align: center !important;
  background-color: #f5f7fa;
  font-size: 16px;
  padding: 12px 0;
}

.el-table td {
  text-align: center !important;
  font-size: 16px;
  padding: 12px 0;
}

/* 操作按钮样式 */
.action-button {
  font-size: 16px !important;
  padding: 8px 16px !important;
  margin: 0 8px !important;
  cursor: pointer;
}

.action-button:disabled {
  background-color: #c0c4cc !important;
  color: #fff !important;
  cursor: not-allowed;
}

/* 状态标签样式 */
.status-tag {
  font-size: 16px !important;
  padding: 8px 16px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
}

/* 确保按钮之间的间距 */
.el-button + .el-button {
  margin-left: 10px;
}

/* 确保标签居中显示 */
.el-tag {
  display: inline-block;
}
</style>